<template>
  <!--期刊专业管理-->
  <div class="wrapper">
    <!--添加-->
    <div style="padding-bottom: 10px">
      <Button v-show="table" type="success" size="small" @click="add">添加</Button>
      <Button v-show="table2" type="success" size="small" @click="back">返回</Button>
    </div>
    <!--表格-->
    <div v-show="table">
      <Table border stripe :columns="columns" :data="data"></Table>
      <!--Vue组件-->
      <div class="page">
        <paging :all="all" @returnValue="returnValue"></paging>
      </div>
    </div>

    <!--公用-->
    <div v-show="public">
      <div class="add_style">
        <span>一级专业:</span>
        <Input v-model="Param.name" placeholder="" style="width: 620px"></Input>
      </div>
      <div class="add_style">
        <span>状态:</span>
        <i-switch v-model="Param.status" size="large">
          <span slot="open">开启</span>
          <span slot="close">禁用</span>
        </i-switch>
      </div>
      <!--添加-->
      <div v-show="addBtn" class="add_style">
        <Button size="small" type="primary" @click="save">保存</Button>
        <Button size="small" type="primary" @click="back">取消</Button>
      </div>
    </div>

    <div v-show="compile">
      <div class="add_style">
        <span style="width: 80px">所属专业:</span>
        <Select v-model="Param.parent" style="width:620px">
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </div>
      <div class="add_style">
        <span style="width: 80px">专业名:</span>
        <Input v-model="Param.name" placeholder="" style="width: 620px"></Input>
      </div>
      <div class="add_style">
        <span style="width: 80px">状态:</span>
        <i-switch v-model="Param.status" size="large">
          <span slot="open">开启</span>
          <span slot="close">禁用</span>
        </i-switch>
      </div>
      <!--编辑-->
      <div v-show="compileBtn" class="add_style">
        <Button size="small" type="primary" @click="save1">保存</Button>
        <Button size="small" type="primary" @click="back">取消</Button>
      </div>
    </div>
  </div>
</template>

<script>
  import paging from '../module/paging.vue';
  export default {
    components: {
      paging
    },
    data() {
      return {
        /*URL*/
        URL: this.$api.url,
        /*分页*/
        all: 1,
        cur: 1,
        /*表格*/
        columns: [
          {
            title: '编号',
            key: 'id',
            align: 'center',
          },
          {
            title: '所属专业',
            key: 'parent',
            align: 'center',
          },
          {
            title: '名称',
            key: 'name',
            align: 'center',
          },
          {
            title: '状态',
            key: '状态',
            width: 100,
            align: 'center',
            render:(h,params)=>{
              let periodical = "";
              if(params.row.status == true){
                periodical="开启";
              }else{
                periodical="禁用";
              }
              return h('span',{
              },periodical)
            }
          },
          {
            title: '操作',
            key: '操作',
            width: 200,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                    }
                  }
                }, '删除'),
              ]);
            }
          },
        ],
        data:[],
        /*隐藏显示*/
        table: true,
        table2: false,
        public: false,
        compile: false,
        addBtn: false,
        compileBtn: false,
        /*参数*/
        Param:{
          id:'',
          parent:'',
          name:'',
          status:false,
          createUser:'',
        },
        cityList: []
      }
    },
    mounted() {
      window.scrollTo(0,0);
      this.Param.createUser = localStorage.getItem('ms_userid');
      this.get(this.URL+'/periodicals/category/admin/list/',this.cur)
    },
    methods: {
      /*分页*/
      returnValue(data) {
        this.cur = data;
        this.get(this.URL+'/periodicals/category/admin/list/',this.cur)
      },
      /*添加*/
      add(){
        this.table = false;
        this.table2 = true;
        this.public = true;
        this.addBtn = true;
      },
      /*返回*/
      back(){
        this.$router.go(0)
      },
      /*添加保存*/
      save(){
        let data={
          name:this.Param.name,
          status:this.Param.status,
          createUser:this.Param.createUser,
        };
        if(data.status == false){
          data.status = 0
        }
        if(data.status == true){
          data.status = 1
        }
        this.post(data,this.URL+'/periodicals/category/add',)
      },
      /*编辑*/
      show(index){
        this.table = false;
        this.table2 = true;
        this.compile = true;
        this.compileBtn = true;
        this.Param.parent = this.data[index].parent;
        this.cityList.push({
          value:this.data[index].parent,
          label:this.data[index].parent,
        });
        this.Param.name = this.data[index].name;
        this.Param.id = this.data[index].id;
        this.Param.status = this.data[index].status;
      },
      save1(){
        let data={
          id:this.Param.id,
          name:this.Param.name,
          status:this.Param.status,
          createUser:this.Param.createUser,
        };
        if(data.status == false){
          data.status = 0
        }
        if(data.status == true){
          data.status = 1
        }
        this.post(data,this.URL+'/periodicals/category/adminUpPc',)
      },
      /*删除*/
      remove(index){
        let data={
          id:this.data[index].id,
          createUser:this.Param.createUser,
        };
        this.$axios({
          method: 'POST',
          headers: {'Content-Type': 'application/json;charset=UTF-8'},
          data: JSON.stringify(data),
          url: this.URL+'/periodicals/category/delete',
        }).then((res) => {
          this.get(this.URL+'/periodicals/category/admin/list/',this.cur)
        })
      },
      /*axios请求*/
      post(data,url) {
        this.$axios({
          method: 'POST',
          headers: {'Content-Type': 'application/json;charset=UTF-8'},
          data: JSON.stringify(data),
          url: url,
        }).then((res) => {
          this.$router.go(0)
        })
      },
      get(url, cur) {
        let _this = this;
        this.$axios.get(url + cur).then((res) => {
          this.all = res.data.totalPage;
          this.data = [];
          for(let i in res.data.lists){
            _this.data.push(res.data.lists[i])
          }
        });
      },
    }
  }
</script>

<style scoped>
  .wrapper {
    margin: 10px;
  }

  .add_style {
    padding-bottom: 10px;
  }

  .add_style > span {
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
  }
</style>
